<template>
  <div>
    <Nav></Nav>
    <div>
      <el-row :gutter="20">
        <el-col :span="7">
          <div>
            <div class="info-top">
              <el-card>
                <div class="info-image">
                  <img src="../../../static/images/1.jpg" alt="头像" />
                  <p>用户名</p>
                </div>
                <p>
                  <span>我的信息</span>
                  <span>22</span>
                </p>
                <p>
                  <span>我的任务</span>
                  <span>22</span>
                </p>

                <el-button type="">写便签</el-button>
              </el-card>
            </div>
            <div class="info-buttom">
              <el-card>
                <p class="one">基本信息</p>

                <div>
                  <p>学历</p>
                  <p>上海大学</p>
                </div>
                <div>
                  <p>手机</p>
                  <p>18621110684</p>
                </div>
                <div>
                  <p>地址</p>
                  <p>南昌市</p>
                </div>
                <div>
                  <p>签名</p>
                  <p>谢谢、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                </div>
              </el-card>
            </div>
          </div>
        </el-col>
        <el-col :span="17">
          <Info></Info>

        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import nav from '../../components/navigation'
import infooption from '../user-center/info/infooption'
export default {
  components: {
    Nav: nav,
    Info: infooption
  }
}
</script>
<style lang="less" scoped>
.info-top {
  .el-card {
    height: 350px;
    margin-bottom: 20px;
    p {
      display: flex;
      justify-content: space-between;
    }
    .el-button {
      width: 100%;
      color: #ffffff;
      background-color: #0074f5;
    }
    .info-image {
      display: flex;
      // justify-content: center;
      flex-direction: column;
      align-items: center;
      img {
        margin-bottom: 10px;
        background-color: blanchedalmond;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: block;
        text-align: center;
      }
    }
  }
}
.info-buttom {
  .el-card {
    height: 450px;
    .one {
      font-size: 26px;
    }
    div {
      height: 60px;
      border-bottom: 1px solid #e6ebf1;
    }
  }
}
</style>